<template>
  <div class="default-layout">
    <Nav v-if="isShowNav" />
    <router-view v-slot="{ Component, route }">
      <keep-alive :include="['HomePage', 'product', 'Profile', 'ContestDetail', 'search']">
        <component :is="Component" :key="route.name" />
      </keep-alive>
    </router-view>
  </div>
</template>

<script setup lang="ts">
  import { watch, ref } from 'vue';
  import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router';
  import Nav from '@/components/Nav.vue';
  const router = useRouter();

  const isShowNav = ref<boolean>(false);

  watch(
    // 监听全局当前路由的响应式对象
    () => router.currentRoute.value,
    (newRoute: any) => {
      console.log('newRoute', newRoute);
      isShowNav.value = newRoute.meta?.showInNav || false;
    },
    { immediate: true } // 初始化时立即执行一次，获取当前路由
  );
</script>

<style lang="scss" scoped>
  @use '@/styles/variables' as *;

  .default-layout {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    background: $primary-bg-color;
    display: flex;
    flex-direction: column;
  }

  .main-content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .layout-content {
    width: 100%;
  }
</style>
